<template>
  <div class="monthlymember_container">
    <!-- 搜索条件 -->
    <div class="nav">
      <Row>
        <Col span="24">
        <Card class="Integraldaily">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
              <Row>
                <Col span="8">
                  <FormItem label="选择颗粒度：">
                    <Row>
                      <Col span="5">
                        <RadioGroup
                          type="button"
                          v-model="formValidate.time_type"
                          class="buttongroup" >
                          <Radio label="3">月</Radio>
                          <Radio label="4">年</Radio>
                        </RadioGroup>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="选择时间：">
                    <Row>
                      <Col span="5">
                        <FormItem prop="start_time" :label-width="120">
                          <!--<DatePicker type="date" placeholder="请选择日期" v-model="formValidate.start_time" style="width:150px;"></DatePicker>-->
                          <DatePicker
                            type="datetime"
                            placeholder="请选择日期"
                            format="yyyy-MM-dd HH:mm:ss"
                            @on-change="formValidate.start_time=$event"
                            v-model="formValidate.start_time"
                            style="width:150px;"
                          ></DatePicker>
                        </FormItem>
                      </Col>

                      <Col span="7" style="text-align: center" push="7">~</Col>
                      <Col span="6" push="5">
                        <FormItem prop="end_time" :label-width="120">
                          <DatePicker type="datetime"
                            placeholder="请选择日期"
                            format="yyyy-MM-dd HH:mm:ss"
                            @on-change="formValidate.end_time=$event"
                            v-model="formValidate.end_time"
                            style="width:150px;"
                          ></DatePicker>
                        </FormItem>
                      </Col>
                    </Row>
                  </FormItem>
                </Col>
              </Row>
              <Row style="margin-top:2vh;">
                <FormItem style="margin-top:1vh;margin-left:-5vw;">
                  <Row>
                    <Col span="8">
                      <Button type="success" style="width:10vw;" @click="handleSubmit('formValidate')">查询</Button>
                    </Col>
                    <Col span="3" push="10">
                      <Button type="success" style="width:10vw;margin-left:1vw;" @click="exportData()">下载</Button>
                    </Col>
                  </Row>
                </FormItem>
              </Row>
            </Form>
          </Card>
        </Col>
      </Row>
    </div>
    <div class="table_container">
      <Table :loading="TableLoading" :columns="columns11" height="300" :data="data7" border ref="table" class="table"></Table>
    </div>
  </div>
</template>
<script>
import { getReportPointMemberDays, exportPointMemberDays } from "@/api/report";
export default {
  name: "Monthlymember",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      TableLoading: false,
      formValidate: {
        // 查询参数
        start_time: "",
        end_time: "",
        channel_id: "",
        store: "",
        channel_id: "",
        time_type: ""
      },
      ruleValidate: {
        // 查询验证
        selectdate: [
          {
            required: true,
            type: "date",
            message: "请选择时间",
            trigger: "change"
          }
        ],
        selecttime: [
          {
            required: true,
            type: "date",
            message: "请选择时间",
            trigger: "change"
          }
        ]
      },
      columns11: [
        // 表头
        {
          title: "每月会员日",
          key: "date_str",
          align: "center",
          className: "demo-table-info-column"
        },
        {
          title: "会员日互动人数",
          key: "interaction_point_member_count",
          align: "center"
        },
        {
          title: "会员日新增积分",
          key: "earn_point",
          align: "center"
        },
        {
          title: "会员日新增行为积分",
          key: "interaction_point",
          align: "center"
        },
        {
          title: "会员日新增消费积分",
          key: "purchase_point",
          align: "center"
        },
        {
          title: "会员日消耗积分",
          key: "burn_point",
          align: "center"
        },
        {
          title: "会员日购买且获得双倍积分的人数",
          key: "double_points_member_count",
          align: "center"
        }
      ],
      data7: []
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.updateTableList();
        } else {
          this.$Message.error("查询失败,请补充查询条件");
        }
      });
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: "月度会员日积分报表"
      });
    },
    //时区日期格式转换(TZ)
    changeDate(dateA) {
      var dateee = new Date(dateA).toJSON();
      var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      return date;
    },
    //列表
    updateTableList() {
      this.TableLoading = true;
      if (this.formValidate.start_time > this.formValidate.end_time) {
        this.$Message.error("开始时间必须小于结束时间!");
        return;
      }
      var reqParams = {
        time_type: this.formValidate.time_type,
        start_time: this.formValidate.start_time,
        end_time: this.formValidate.end_time
      };
      getReportPointMemberDays(reqParams).then(res => {
        //this.load = true;
        if (res.data.code == 200) {
          //this.totalSize = res.data.total;
          this.data7 = res.data.result.formList;
          this.$Message.success("查询成功!");
          //this.DateReady = true;
          this.TableLoading = false;
        } else {
          this.$Message.error("查询失败!" + res.data.msg);
          this.TableLoading = false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.monthlymember_container {
  @include container_global;
  background-color: #fff;
  .active {
    color: #68b6ff;
    border: 1px solid #8fc3ff;
    background-color: #e6f2ff;
  }
  .nav {
    height: 25vh;
    width: 100%;
    line-height: 35px;
    background-color: #fff;
    position: relative;
    .buttongroup {
      display: flex;
      justify-content: flex-start;
    }
  }
  .table_container {
    width: 100%;
    min-height: 30vh;
    margin-top: -5vh;
    .table {
      width: 100%;
    }
  }
  .page {
    width: 80vw;
    height: 60px;
    margin-top: 2vh;
    display: flex;
    justify-content: center;
  }
}
</style>
